<template>
  <div>
    <video
      ref="video"
      :src="url"
      class="video-box"
      autoplay
      controls
      loop
      :poster="url + '?vframe/jpg/offset/2/w/1200/h/675'"
    >
    </video>
  </div>
</template>

<script setup>
defineProps({
  url: String,
  default: () => {
    return ''
  }
});
const { proxy } = getCurrentInstance();
function setPauseListener() {
  proxy.$refs.video.pause();
}
function setPlayListener() {
  proxy.$refs.video.play();
}
defineExpose({
  setPauseListener,
  setPlayListener
})
</script>

<style>
  .video-box {
    width: 100%;
    height: 100%;
  }
</style>
